<template>
	<div class="present_weather">
		<!-- 实时天气信息详情 -->
		<div class="weather_detail">
			<!-- 显示发布时间 -->
			<p class="data_resourse">中国气象台{{now_data.obsTime}}发布</p>
			<!-- 显示基本信息，温度天气描述等 -->
			<div class="base_info">
				<div class="temp">{{now_data.temp}}°</div>
				<div class="weather_status">{{now_data.text}}</div>
				<!-- 未完善预警及空气质量信息 -->
				<div class="air"><div></div>11 优</div>
			</div>
			<!-- 实时天气详情，风向风力，湿度、气压 -->
			<ul class="detail_info">
				<li class="wind"><div></div>{{now_data.windDir}} {{now_data.windScale}}级</li>
				<li class="humidity"><div></div>湿度 {{now_data.humidity}}%</li>
				<li class="pressure"><div></div>气压 {{now_data.pressure}}hpa</li>
			</ul>
		</div>
		<!-- 实时天气图标 -->
		<div class="weather_icon" v-bind:style="'background-image: url('+ img_url + now_data.icon +'.png)' "> </div>
	</div>
</template>

<script>
	export default {
		data: function () {
			return {
				now_data: {
					temp: "",
					text: "",
					windDir: "",
					windScale: "",
					humidity: "",
					pressure: "",
					icon: "",
				},
				id: ""
			}
		},
		props: {
			// city_id: String
		},
		computed: {
			img_url: function () {
				return process.env.BASE_URL + 'WeatherIcon/weather-icon-S1/color-128/'
			},
			cityId() {
				return this.$store.state.cityId;
			}
		},
		watch: {
			// 监视city_id的变化，当它发生变化时，请求数据
			cityId (nowId) {
				let url = 'https://devapi.heweather.net/v7/weather/now?key=4f1744b1ba5b47ab8b0a893374efa8ca&location=' + nowId;
				this.$axios
					.get(url)
					.then(res => {
						// 使用正则匹配信息更新时间
						let reg = /\d{2}:\d{2}(?=\+)/;
						this.now_data = res.data.now;
						this.id = this.$props.city_id;
						this.now_data.obsTime = this.now_data.obsTime.match(reg)[0]
					})
			}
		}
	}
</script>

<style lang="less">
	.present_weather {
		position: relative;
		width: 1200px;
		height: 300px;
		margin: 47px auto;
		color: #fff;
		z-index: 1;
		.weather_detail {
			p {
				font-size: 14px;
				margin-bottom: 20px;
				color: rgba(255,255,255,.6);
			}
			.base_info {
				display: flex;
				align-items: baseline;
				.temp {
					font-size: 86px;
				}
				.weather_status {
					font-size: 28px;
				}
				.air {
					position: relative;
					margin-left: 20px;
					padding-right: 8px;
					font-size: 14px;
					height: 24px;
					width: 60px;
					text-align: right;
					line-height: 24px;
					background-color: #a3d765;
					border-radius: 14px;
					div {
						position: absolute;
						left: 3px;
						top: 3px;
						height: 18px;
						width: 18px;
						border-radius: 9px;
						background-color: #fff;
						background-image: url(../../public/sprite.png);
						background-position: -216px 0px;
					}
				}
			}
			.detail_info {
				width: 100%;
				font-size: 18px;
				margin-top: 10px;
				li {
					display: inline-block;
					margin-right: 45px;
					div{
						margin-right: 10px;
						float: left;
						height: 20px;
						width: 20px;
						background-image: url(../../public/sprite.png);
						background-position-x: -190px;
					}
				}
				.wind>div {
					background-position-y: -72px;
				}
				.humidity>div {
					background-position-y: -118px;
				}
				.pressure>div {
					background-position-y: -96px;
				}
			}
		}
		.weather_icon {
			position: absolute;
			right: 90px;
			top: 50px;
			width: 134px;
			height: 134px;
			border-radius: 67px;
			background-color: rgba(255,255,255,.5);
			background-position: 4px -2px;
		}
	}
</style>
